<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>BLOG </title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<!--引入 favcion 图标 -->
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<meta name="mobile-web-app-capable" content="yes">
		<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
		<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
		<meta name="msapplication-TileColor" content="#0e90d2">
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/app.css">
		<!--引入 外部的js文件-->
		<script src="assets/js/baseUrl.js"></script>
		<script src="assets/js/jquery.min.js"></script>
		<script type="text/javascript">
			console.log("hello");
			console.log(url);
		</script>
	</head>

	<body id="blog">

		<header id="header" class="am-g am-g-fixed blog-fixed blog-text-center blog-header">
			<script type="text/javascript ">
				$("#header").load("common/header.html");
				console.log("加载了header.html文件 ");
			</script>
		</header>
		<hr>
		<!-- nav start -->
		<nav class="am-g am-g-fixed blog-fixed blog-nav" id="menu">
			<script type="text/javascript">
				$("#menu").load("common/menu.html");
				console.log("加载了菜单menu");
			</script>
		</nav>
		<hr>
		<!-- nav end -->
		<!-- banner start  轮播图-->
		<div class="am-g am-g-fixed blog-fixed am-u-sm-centered blog-article-margin">
			<div data-am-widget="slider" class="am-slider am-slider-b1" data-am-slider='{&quot;controlNav&quot;:false}'>
				<ul class="am-slides">
					<li>
						<img src="assets/i/b1.jpg">
						<div class="blog-slider-desc am-slider-desc ">
							<div class="blog-text-center blog-slider-con">
								<span><a href="article.html" class="blog-color">Article &nbsp;</a></span>
								<h1 class="blog-h-margin"><a href="article.html">this is one page</a></h1>
								<p>那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。
								</p>
								<span class="blog-bor">2015/10/9</span>
								<br><br><br><br><br><br><br>
							</div>
						</div>
					</li>
					<li>
						<img src="assets/i/b2.jpg">
						<div class="am-slider-desc blog-slider-desc">
							<div class="blog-text-center blog-slider-con">
								<span><a href="article.html" class="blog-color">Article &nbsp;</a></span>
								<h1 class="blog-h-margin"><a href="article.html">this is two page</a></h1>
								<p>那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。
								</p>
								<span>2015/10/9</span>
							</div>
						</div>
					</li>
					<li>
						<img src="assets/i/b3.jpg">
						<div class="am-slider-desc blog-slider-desc">
							<div class="blog-text-center blog-slider-con">
								<span><a href="article.html" class="blog-color">Article &nbsp;</a></span>
								<h1 class="blog-h-margin"><a href="article.html">this is three page</a></h1>
								<p>那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。
								</p>
								<span>2015/10/9</span>
							</div>
						</div>
					</li>
					<li>
						<img src="assets/i/b2.jpg">
						<div class="am-slider-desc blog-slider-desc">
							<div class="blog-text-center blog-slider-con">
								<span><a href="article.html" class="blog-color">Article &nbsp;</a></span>
								<h1 class="blog-h-margin"><a href="article.html">this is four page</a></h1>
								<p>那时候刚好下着雨，柏油路面湿冷冷的，还闪烁着青、黄、红颜色的灯火。
								</p>
								<span>2015/10/9</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- banner end -->

		<!-- content srart  文章列表-->
		<div class="am-g am-g-fixed blog-fixed">
			<div class="am-u-md-8 am-u-sm-12">
				<div id="article">
					<script type="text/javascript">
						//获取文章列表
						// TODO
						//查询数据
						$(window).load(function() {
							$.ajax({
								type: "post",
								url: getArticles,
								async: true,
								data: {},
								success: function(result) {
									addEle(result);
								},
								error: function() {
									window.alert("请求失败");
								}
							});
							//元素追加
							function addEle(result) {
								var data = result.data.data;
								console.log(data);
								for(j = 0; j < data.length; j++) {
									console.log(data[j]);
									//循环追加
									$("#article").append("<article class='am-g blog-entry-article'> <div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img'><img src='assets/i/f10.jpg' alt='' class='am-u-sm-12'></div><div class='am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text'><span><a href='article.html' class='blog-color'>article &nbsp;</a></span><span> @QAQ &nbsp;</span><span>" + data[j].publishTime + "</span><h1><a href='http://localhost:8686/blog/article.html?id="+data[j].articleId+"'>" + data[j].articelTitle + "</a></h1><p>我们一直在坚持着，不是为了改变这个世界，而是希望不被这个世界所改变。</p><p><a href='' class='blog-continue'>continue reading</a></p></div></article>");

								}

							}
						});
					</script>

					<article class="am-g blog-entry-article">
						<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
							<img src="assets/i/f19.jpg" alt="" class="am-u-sm-12">
						</div>
						<div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
							<span><a href="" class="blog-color">article&nbsp;</a></span>
							<span> @amazeUI &nbsp;</span>
							<span>2015/10/9</span>
							<h1><a href="">一想到你，我这张丑脸上就泛起微笑</a></h1>
							<p>那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。
							</p>
							<p>
								<a href="" class="blog-continue">continue reading</a>
							</p>
						</div>
					</article>
				</div>
				<ul class="am-pagination">
					<li class="am-pagination-prev">
						<a href="">&laquo; Prev</a>
					</li>
					<li class="am-pagination-next">
						<a href="">Next &raquo;</a>
					</li>
				</ul>
			</div>

			<div class="am-u-md-4 am-u-sm-12 blog-sidebar" id="right">
			<script type="text/javascript">
                $("#right").load("common/right.html");
                console.log("加载了右边栏 数据")
			</script>
		</div>
		</div>
		<!-- content end -->

		<footer class="blog-footer" id="foot">
			<script type="text/javascript">
				$("#foot").load("common/footer.html");
				console.log("加载了footer.html文件 ");
			</script>
		</footer>

		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="assets/js/jquery.min.js"></script>
		<!--<![endif]-->
		<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
		<script src="assets/js/amazeui.min.js"></script>
	</body>

</html>